<template>
  <div>
    <div class="hot">
      <div class="head"></div>
      <div class="center">
        <apple-music :musicList="musicList" @musicMessage="musicMessage">
        </apple-music>
      </div>
    </div>
  </div>
</template>


<script>
import appleMusic from "../recommendList/appleMusic.vue";
import { detail } from "@/api/home/home";
export default {
  components: {
    appleMusic,
  },
  data() {
    return {
      musicList: [],
    };
  },
  mounted() {
    detail({ id: 3778678 }).then((res) => {
      if (res.status == 200) {
        console.log(res);
        let arr = [];
        let n = res.data.playlist.tracks.slice(0, 10);
        let b = res.data.privileges.slice(0, 10);
        n.forEach((item, index) => {
          arr.push({
            id: item.id,
            name: item.name,
            song: {
              artists: item.ar,
              privilege: {},
              album: {
                name: "",
              },
            },
            picUrl: item.al.picUrl,
            num: index < 9 ? "0" + (index + 1) : index + 1,
          });
        });
        for (var i = 0; i < b.length; i++) {
          arr[i]["song"]["privilege"]["playMaxbr"] =
            res.data.privileges[i]["playMaxbr"];
        }
        this.musicList = arr;
      }
    });
  },
  methods: {
    musicMessage(item) {
      this.$emit("musicMessage", item);
    },
  },
};
</script>

<style lang="less" scoped>
.hot {
  .head {
    height: 150px;
    background: url("https://p1.music.126.net/ZyUjc7K_GDpD8MO1-GQkmA==/109951166952706664.jpg")
      no-repeat center/cover;
  }
}
</style>